<template>
	<div>
		<div align="center">
			<v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" tag="div">
				<div class="left" @click="onSwipeRight">
					<van-icon name="arrow-left" />
				</div>
				<div class="right" @click="onSwipeLeft">
					<van-icon name="arrow" />
				</div>
				<div style="position: absolute;top: 110px;left: 180px;right: 180px;">
					<van-row gutter="40"  class="a-fadeinL">
						<van-col span="8" v-for="(item,index) in list " :key="index">
							<img :src="item.companyTypeUrl" style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;" width="266" height="160" @click="getImg(item.id)" />
							<span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">{{item.name}}</span>
						</van-col>

					</van-row>
					
				</div>
			</v-touch>
		</div>
	</div>
</template>

<script>
	let _this;
	export default {
		name: 'Index',
		data() {
			return {
				current: 1,
				size: 6,
				list: [],
				page:''
			}
		},
		beforeCreate() { // 创建 vue 实例之前
			_this = this;
		},
		watch: {

		},
		mounted() {
			this.getList();
		},
		methods: {
			getList() {
					let params = {
				size:this.size, //每页条数
				current:this.current //页码
			}
				 this.$http
				.get("/enterpriseintroduction/selectCompanyByPaging",{params:params})
				.then(res => {
				if (res.data.code == 200) {
					this.list = res.data.data.records;
					this.page = res.data.data.pages;		
				} else if (res.code == 500) {
					this.$notify(res.msg);
				}
				});
			},
			 onSwipeLeft() { // 左滑
			  if(this.current == this.page) {
				this.$notify('无更多');
				return false;				
			}
				this.current ++;
				this.getList();
			},
			onSwipeRight() { // 右滑
			if(this.page <=1) {
				return false;
			}
				this.current --;
				this.getList();
			},
			getImg(index) {
				this.$router.push({
					name: 'bothAbout',
					query: {
					pageId: index,
					
					}
				})
			}
		}
	}
</script>

<style scoped>
	/deep/ .van-icon {
		font: 24px/1 "vant-icon";
	}
	
	/deep/ .van-row {
		margin-right: 0!important;
	}
	
	.left /deep/ .van-icon {
		font: 48px/1 "vant-icon";
		color: rgb(56, 107, 146);
	}
	
	.left {
		position: absolute;
		top: 220px;
		left: 100px;
	}
	
	.right /deep/ .van-icon {
		font: 48px/1 "vant-icon";
		color: rgb(53, 86, 114);
	}
	
	.right {
		position: absolute;
		top: 330px;
		left: 100px;
	}
</style>